<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:t="http://myfaces.apache.org/tomahawk">
    <h:head>
    	<h:outputStylesheet library="css" name="table.css" />
        <!-- it is test of the session bean -->
        <title>
            <h:outputText value="#{startPageBean.name}"/>
        </title>
        <f:view>
            <f:metadata>
                <!-- parse request parameters in tag f:viewParam -->
               <f:viewParam name="currentID" value="#{viewerPageBean.id}" />
            </f:metadata>
        </f:view>
        <script type="text/javascript">
<!--
var current_row = null;

function highlight(row) {
    // clear selection on previous table line
    if (current_row != null) {
        for (var j = 0, col; col = current_row.cells[j]; j++)
            col.className = null;
    }
    // coloring selected table line
    if (current_row != row) {
        var value_obj = '';
        for (var j = 0, col; col = row.cells[j]; j++) {
            col.className = 'select';
            value_obj += col.innerHTML.toString() + ' * ';
        }

        var container = document.getElementById('sip');
        if (container != null) {
            var url='details.xhtml?currentID=' + row.cells[0].firstChild.innerHTML;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState==4)
                    if(xmlhttp.status==200) {
                        container.innerHTML=xmlhttp.responseText;
                        container.style.visibility = 'visible';
                    }
            }

            xmlhttp.open('GET', url, true);
            xmlhttp.send();
        }

        current_row = row;
    } else {
        current_row = null;
        var container = document.getElementById('sip');
        if (container != null) {
            container.style.visibility = 'hidden';
            container.innerHTML = '';
        }
    }
}

//-->
        </script>
    </h:head>
    <h:body>
        <h:link value="1) lazzy back" outcome="gohome" />
        <t:htmlTag value="br" />
        <h:form>
            <h:commandLink value="2) redirect back" action="#{viewerPageBean.gohome}" />
        </h:form>
        <t:htmlTag value="br" />
        <t:htmlTag value="br" />
        
        <h:outputText value="Name: #{viewerPageBean.name}" />
        <t:htmlTag value="br" />
        <h:outputText value="Date: #{viewerPageBean.date}" />
        <t:htmlTag value="br" />
        <h:outputText value="File name: #{viewerPageBean.filename}" />
        <t:htmlTag value="br" />
        
        <h:form>
            <h:panelGrid columns="3" border="1" width="50%">
                <f:facet name="header">
                    <h:outputText value="Enter filter below"/>
                </f:facet>

                <h:inputText id="pattern" value="#{viewerPageBean.pattern}">
                    <f:validateLength maximum="64" />
                </h:inputText>
                <h:commandButton value="Apply" action="#{viewerPageBean.applayFilter(false)}" />
                <h:commandButton value="Reset" action="#{viewerPageBean.applayFilter(true)}" />
            </h:panelGrid>
        </h:form>
        
        <div class="wrapper">

            <div class="left_block">
            <h:dataTable border="1" value="#{viewerPageBean.messageList}" var="s" 
    			styleClass="order-table"
    			headerClass="order-table-header"
    			rowClasses="#{viewerPageBean.rowColor}">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="ID" />
                    </f:facet>
                    <h:outputLabel value="#{s.id}" onclick="highlight(this.parentNode.parentNode);" />
                </h:column>
                <h:column>
                    <f:facet name="header" >
                        <h:outputText value="Direction" />
                    </f:facet>
                    <h:outputLabel value="#{s.sipMessageType}" onclick="highlight(this.parentNode.parentNode);" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="From" />
                    </f:facet>
                    <h:outputLabel value="#{s.from}" onclick="highlight(this.parentNode.parentNode)" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="To" />
                    </f:facet>
                    <h:outputLabel value="#{s.to}" onclick="highlight(this.parentNode.parentNode);" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="CSeq" />
                    </f:facet>
                    <h:outputLabel value="#{s.cSeq}" onclick="highlight(this.parentNode.parentNode);" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Call-ID" />
                    </f:facet>
                    <h:outputLabel value="#{s.callId}" onclick="highlight(this.parentNode.parentNode);" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Length" />
                    </f:facet>
                    <h:outputLabel value="#{s.len}" onclick="highlight(this.parentNode.parentNode);" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Contact" />
                    </f:facet>
                    <h:outputLabel value="#{s.contact}" onclick="highlight(this.parentNode.parentNode);" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="User-Agent" />
                    </f:facet>
                    <h:outputLabel value="#{s.userAgent}" onclick="highlight(this.parentNode.parentNode);" />
                </h:column>
            </h:dataTable>
            </div>

            <div class="right_block" id="sip" />

        </div>
    </h:body>
</html>

